<template>
  <div class="my-checkbox" @click='toggleSelect()'>
    <i v-if="checked" class="iconfont icon-checked"></i>
    <i v-else class="iconfont icon-unchecked"></i>
    <span>
      <slot />
    </span>
  </div>
</template>
<script>
import { toRef } from 'vue'

export default {
  name: 'MyCheckbox',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    // 父组件将原始的状态值传递给子组件并且保证响应式能力
    const checked = toRef(props, 'modelValue')
    const toggleSelect = () => {
      // checked.value = !checked.value
      // 修改父组件中的modelValue的值
      emit('update:modelValue', !checked.value)
    }
    return { checked, toggleSelect }
  }
}
</script>
